<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--
        表单：
            作用：收集用户信息。
            使用场景：
                1. 登录页面
                2. 注册页面
                3. 搜索区域
    -->
    <!--
        input 标签 type 属性值不同，则功能不同。
            type: 文本框，用于输入单行文本
                text: 文本框
                password: 密码框
                radio：单选框
                checkbox: 多选框
                file: 上传文件
        属性：
            placeholder: 文本提示信息
    -->
    <input type="text" placeholder="文本提示">

    <!--
        单选框
        input标签：
        属性：
            type: radio
            name: 控件名称，控件分组，同组只能选中一个（单选功能）
            checked: 默认选中。属性名和属性值相同，简写为一个单词
    -->
    <input type="radio" name="gender" checked> a
    <input type="radio" name="gender"> b

    <!--
        上传文件：
        默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
    -->
    <input type="file" multiple>

    <!--
        多选框：
            input标签：
            属性：
                type: checkbox
                checked: 默认选中
    -->
    <input type="checkbox" checked>

    <!--
        下拉菜单：select
            select 嵌套 option
                select是下拉菜单整体
                option是下拉菜单每一项
                selected：默认选中
    -->
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option selected>武汉</option>
    </select>

    <!--
        文本域：多行输入文本的表单控件。
    -->
    <textarea>默认提示文字</textarea>

    <!--
        label标签：
            在网页中，某个标签的说明文本
            经验：用label标签绑定文本和表单控件的关系，增大表单控件的点击范围
    -->
    <!--
        写法一：
            label标签只包裹内容，不包裹表单控件
            设置label标签的for属性和表单控件的id属性相同
    -->
    <input type="radio" id="man">
    <label for="man">男</label>
    <!--写法二：使用 label 标签包裹文字和表单控件，不需要属性-->
    <label><input type="radio"> 女</label>
    <!--提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。-->

    <!-- form 表单区域 -->
    <!-- action="" 发送数据的地址 -->
    <form action="#">
        用户名：<input type="text">
        <br><br>
        密码: <input type="password">
        <br><br>
        <!--按钮需配合 form 标签（表单区域）才能实现对应的功能。-->
        <!--如果省略type属性，功能是提交（submit）-->
        <!--
            type属性值：
                submit: 提交按钮，点击后可以提交数据到后台（默认功能）
                reset: 重置按钮，点击后将表单控件恢复到默认值
                button: 普通按钮，默认没有功能，一般配合JavaScript使用
        -->
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
    </form>


</body>
</html>